<template>
  <section class="map-info-show">
    <section class="mainMap">
      <common-map
        ref="map"
        style="height: calc(100vh - 100px)"
        :end-drag-box-handler="endDragBoxHandler"
        :isTool="true"
        :toolbarSelectVisible="true"
        @map-click="ShowDetail"
      >
      </common-map>
    </section>
    <!--其他组件-->
    <boat-detail
      :visible='showBoatDialog'
      @close="showDetailDialog = -1"
      ref="boatDetail">
    </boat-detail>
    <div class="command__wrapper_container" v-show="visible">
      <el-container>
        <el-header :height="'45'">
          <svg-icon icon-class="table"></svg-icon>
          船只列表
          <svg-icon icon-class="eye-open" @click="clickShow" style="cursor: pointer;right: 10px !important;left:auto" v-show="eyeOpen"></svg-icon>
          <svg-icon icon-class="eye" @click="clickShow" style="cursor: pointer;right: 10px !important;left:auto" v-show="eyeClose"></svg-icon>
        </el-header>
        <el-main v-show="showmain">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="船名" prop="shipName">
              <el-input
                v-model="queryParams.shipName"
                placeholder="请输入船名"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="船舶编码" prop="shipCode">
              <el-input
                v-model="queryParams.shipCode"
                placeholder="请输入船舶编码"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="shipList">
            <el-table-column label="主建id" align="center" prop="id" v-if="false"/>
            <el-table-column label="数据状态" align="center" prop="isOnline">
              <template slot-scope="scope">
                <label>{{ scope.row.isOnline === false ? '离线' : '在线' }}</label>
              </template>
            </el-table-column>
            <el-table-column label="定位" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-location-information"
                  @click="showPoint(scope.row)"
                  v-hasPermi="['basicInformation:appUser:point']"
                >定位
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="船名" align="center" prop="shipName"/>
            <el-table-column label="船舶编码" align="center" prop="shipCode"/>
            <el-table-column label="船长" align="center" prop="captain"/>
            <el-table-column label="辖区代码" align="center" prop="jurisdictionCode"/>
            <el-table-column label="作业类型" align="center" prop="workType"/>
            <el-table-column label="联系电话" align="center" prop="contactNumber"/>
            <el-table-column label="船舶类型" align="center" prop="shipType" :formatter="shipTypeFormat"/>
          </el-table>
          <pagination
            v-show="total>0"
            :page-sizes="[6]"
            :total="total"
            layout="total, prev, pager, next"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-main>
      </el-container>
    </div>
  </section>
</template>
<script>
  import boatDetail from '@/views/onemap/Detail/boatDetail'
  import { commandMapMixin } from '@/plugin/map/commandMapMixin'
  import { currentPoint, listShip } from '@/api/basicInformation/ship'

  export default {
    name: 'boatMap',
    mixins: [commandMapMixin],
    components: {
      boatDetail
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        map: null,
        keys: null,
        endDragBoxHandler: (extent, features) => {
          this.endMapSelect(extent, features)
        },
        total: 0,
        switchBoat: true,
        visible: true,
        boatList: [],
        shipList: [],
        boatVisible: false,
        showDetailDialog: -1,
        markers: [],
        queryParams: {
          pageNum: 1,
          shipName: undefined,
          shipCode: undefined,
          shipType: undefined,
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        icon: '/image/map/boat.png',
        shipTypeOptions: [],
        showmain: true,
        eyeOpen:true,
        eyeClose:false
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.switchShow(true)
        this.getDicts('ship_type').then(response => {
          this.shipTypeOptions = response.data
        })
        this.getList()
      })
    },
    computed: {
      showBoatDialog() {
        return this.showDetailDialog === 2
      }
    },
    methods: {
      handleSearch() {
      },
      clickShow() {
        if (this.showmain) {
          this.showmain = false
          this.eyeOpen=false
          this.eyeClose=true
        } else {
          this.showmain = true
          this.eyeOpen=true
          this.eyeClose=false
        }
      },
      getList() {
        this.loading = true
        this.queryParams.pageSize = 6
        listShip(this.queryParams).then(response => {
          this.shipList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 6,
          shipName: undefined,
          shipCode: undefined,
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        }
        this.resetForm('form')
        this.getList()
      },
      endMapSelect(extent) {
        this.queryParams.minX = extent[0]
        this.queryParams.minY = extent[1]
        this.queryParams.maxX = extent[2]
        this.queryParams.maxY = extent[3]
        this.getList()
      },
      handleCloseDialog() {
        // this.visible=false
      },
      // 船舶类型字典翻译
      shipTypeFormat(row, column) {
        return this.selectDictLabel(this.shipTypeOptions, row.shipType)
      },
      switchShow($event) {
        if ($event) {
          this.boatList = []
          let that = this
          this.queryParams.pageSize = 99999
          currentPoint(this.queryParams).then(response => {
            if (response.code == 200 && response.total > 0) {
              response.rows.forEach((item) => {
                if (item.x !== null && item.y !== null) {
                  let arr = {}
                  arr.coordinates = [item.x, item.y]
                  arr.id = item.id
                  arr.title = item.shipName
                  arr.target = 'boat'
                  arr.animate = true
                  arr.stopEvent = true
                  arr.icon = this.icon
                  arr.item = item
                  that.boatList.push(arr)
                }
              })
              that.$refs.map.showMarkerFeature(that.boatList, false, 'boat')
            }
          })
        } else {
          this.boatList = []
          this.$refs.map.clearMarkerFeature('boat')
        }
      },
      ShowDetail(e) {
        if (e) {
          this.$refs.boatDetail.handleShowCaseInfo(e)
          this.showDetailDialog = 2
        }
      },
      showPoint(e) {
        if (e.x !== null && e.y !== null) {
          if (this.boatList.length === 0) {
            let arr = {}
            arr.coordinates = [e.x, e.y]
            arr.id = e.id
            arr.title = e.shipName
            arr.target = 'boat'
            arr.animate = true
            arr.stopEvent = true
            arr.icon = this.icon
            arr.item = e
            this.boatList.push(arr)
            this.$refs.map.showMarkerFeature(this.boatList, false, 'boat')
          }
          this.$refs.map.map.getMap().getView().animate({
            center: [e.x, e.y],
            duration: 500
          })
        } else {
          this.$message({
            message: '暂无定位信息',
            type: 'warning'
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/views/onemap/style/main';

  .command__wrapper_container {
    left: 50px !important;
  }

  .mainMap {
    position: relative;

    .app-container {
      padding: 10px;
    }
  }

  .map-info-show ::v-deep .row-hsla {
    position: absolute;
    z-index: 9999;
    top: 1%;
    width: 158px;
    left: 0;
    padding: 20px;
    background: hsla(0, 0%, 100%, .1);
    border: .5px solid #9febe0;
    border-radius: 5px;
    -webkit-box-shadow: 5px 5px 20px 10px rgb(0 255 235/30%);
    box-shadow: 5px 5px 20px 10px rgb(0 255 235/30%);
  }

  .map-info-show ::v-deep .row-hsla .row-hsla-switch {
    background-color: #34495e !important;
    border: #34495e !important;
    color: #fff !important;
    line-height: 32px;
    border-radius: 5px;
  }

  .map-info-show ::v-deep .row-hsla .el-switch__label, .map-info-show ::v-deep .row-hsla .el-switch__label.is-active {
    color: #ffffff;
  }
</style>
